<template>
  <div>
    <div id="condition" class="app-container">
      <el-form :model="queryForms" ref="queryForms" size="small" v-show="true" :inline="true" label-width="68px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="时间区间" prop="timeRange">
              <el-select clearable placeholder="请选择时间区间" v-model="queryForms.timeRange" @change="getECharts">
                <el-option label="按年份报表" value="YEAR"></el-option>
                <el-option label="按季度报表" value="QUARTER"></el-option>
                <el-option label="按月份报表" value="MONTH"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker clearable
                              v-model="queryForms.startTime"
                              type="date"
                              @change="getECharts"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker clearable
                              v-model="queryForms.endTime"
                              type="date"
                              @change="getECharts"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="getECharts">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div id="main" style="height: 440px"></div>
  </div>
</template>

<script>

import {listReport} from '@/api/crm/report'
import * as echarts from 'echarts';

export default {
  name: "index",
  data(){
    return{
      queryForms:{
        timeRange: null,
        startTime: null,
        endTime: null
      },
    }
  },
  mounted(){
    this.getECharts();
  },
  methods: {
    async getECharts(){
      var myChart = echarts.init(document.getElementById('main'));
      const ajaxData = {
        title: {
          text: '合同总金额报表'
        },
        tooltip: {},
        legend: {
          data: ['期待合同总金额','实际合同总金额']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            name: '期待合同总金额',
            data: [],
            barGap: '20%',
            barCategoryGap: '40%'
          },
          {
            type: 'bar',
            name: '实际合同总金额',
            data: [],
            barGap: '20%',
            barCategoryGap: '40%'
          }
        ]
      }

      await listReport(this.queryForms).then(resp=>{
        console.log(resp)
        let timeRange = '';
        for (let i = 0; i < resp.data.length; i ++){
          if (this.queryForms.timeRange == 'YEAR'){
            timeRange = resp.data[i].timeRange+"年\t"
          }
          if (this.queryForms.timeRange == 'QUARTER'){
            timeRange = "第"+resp.data[i].timeRange+"季度\t"
          }
          if (this.queryForms.timeRange == 'MONTH'){
            timeRange = resp.data[i].timeRange+"月\t"
          }
          ajaxData.xAxis.data.push(timeRange+resp.data[i].deptName +"\n合同成交总金额")
          ajaxData.series[0].data.push(resp.data[i].originalPrice)
          ajaxData.series[1].data.push(resp.data[i].discountPrice)
        }
          console.log(ajaxData.series[0].data)
          // ajaxData.series[1].push(respKey.discountPrice)
        // ajaxData.xAxis.data.push(arr)
      })
      myChart.setOption(ajaxData)
    },
    resetQuery() {
      this.resetForm("queryForms");
    }
  }
}
</script>
